<template>
  <div class="update-comp-modal">
    <div class="header">
      <div class="float-right">
        <Button type="error" class="m-r-5px" size="small" @click="updateLayoutItems">更新所有布局块</Button>
        <Button type="error" class="m-r-5px" size="small" @click="updateComps(true)">更新所有组件</Button>
        <Button type="primary" class="" size="small" @click="updateComps(false)">一键升级</Button>
      </div>

      <div class="clearfix"></div>
    </div>
    <div class="body">
      <div class="renewable-comp-item" v-for="(comp, index) in renewableComps" :key="index">
        <p><Tag color="default">{{comp.compAliasName}}</Tag>v{{comp.currentVersion}} <Icon type="md-arrow-round-forward" /> v{{comp.latestVersion}}</p>
      </div>
      <p v-show="renewableComps.length == 0" style="text-align: center; margin-bottom: 5px; color: #e57373;">无数据</p>
    </div>
    <div class="footer">
      <p>检测到可更新组件数量：{{renewableComps.length}}</p>
    </div>
  </div>
</template>

<script>
  import _ from "lodash";

  export default {
    name: 'UpdateCompModal',
    props: {
      show: {
        type: Boolean,
        default: false
      },
      layoutItems: {
        type: Array,
        default: () => ([])
      }
    },
    data() {
      return {
        renewableComps: [], // 可更新组件列表
      }
    },
    mounted() {

    },
    methods: {

      mergeWithCustomizer (objValue, srcValue) {
        if (_.isString(objValue) || _.isBoolean(objValue) || _.isInteger(objValue) || _.isNumber(objValue)) {
          return objValue
        }
        if (_.isArray(objValue)) {
          objValue.forEach((o, index) => {
            _.mergeWith(o, srcValue[index], this.mergeWithCustomizer)
          })
        }
        if (_.isObject(objValue)) {
          _.mergeWith(objValue, srcValue, this.mergeWithCustomizer)
        }
      },

      /**
       * 升级阶段排除一些字段的更新
       * @param attrCompConfigData
       */
      upgradeExcludeFields (attrCompConfigData) {
        delete attrCompConfigData.ds_resultObj
      },

      updateLayoutItems () {

        this.$Modal.confirm({
          title: '提醒',
          content: '此操作会强制更新当前页面所有布局块，确定要执行吗？',
          onOk: () => {
            let layoutItems = this.$PnUtil.deepClone(this.layoutItems);
            layoutItems.forEach(layoutItem => {
              let layoutItemConfigData = layoutItem.layoutItemConfigData;
              let attrLayoutItemConfigData = this.$DesignerCommonUtil.buildAbsoluteLayoutItem().layoutItemConfigData;
              layoutItem.layoutItemConfigData = _.mergeWith(layoutItemConfigData, attrLayoutItemConfigData, this.mergeWithCustomizer);
            });
            this.$store.commit('designer/setLayoutItems', layoutItems);
            this.$Message.success('升级完成，请记得保存页面');
          }
        });
      },

      updateComps (all) {

        if (!all && this.renewableComps.length == 0) {
          this.$Message.warning({
            content: '未检测到可更新组件，如需要强制更新，您可以点击【更新所有组件】。',
            duration: 5
          });
          return
        }

        this.$Modal.confirm({
          title: '提醒',
          content: all ? '此操作会强制更新当前页面所有布局块关联的组件，确定要执行吗？' : '确定升级当前检测出的可更新组件吗？',
          onOk: () => {
            let layoutItems = this.$PnUtil.deepClone(this.layoutItems);
            layoutItems.forEach(layoutItem => {
              if (layoutItem.component.id) {
                if (all) {
                  let compConfigData = layoutItem.component.compConfigData;
                  let attrCompConfigData = this.$PnUtil.getCompConfigData(layoutItem.component.name);
                  this.upgradeExcludeFields(attrCompConfigData)
                  layoutItem.component.version = this.$PnUtil.getCompBaseAttr(layoutItem.component.name).version;
                  layoutItem.component.compConfigData = _.mergeWith(compConfigData, attrCompConfigData, this.mergeWithCustomizer);
                }else {
                  for (let i=0; i<this.renewableComps.length; i++) {
                    if (this.renewableComps[i].compName == layoutItem.component.name) {
                      let compConfigData = layoutItem.component.compConfigData;
                      let attrCompConfigData = this.$PnUtil.getCompConfigData(layoutItem.component.name);
                      this.upgradeExcludeFields(attrCompConfigData)
                      layoutItem.component.version = this.renewableComps[i].latestVersion;
                      layoutItem.component.compConfigData = _.mergeWith(compConfigData, attrCompConfigData, this.mergeWithCustomizer);
                    }
                  }
                }
              }
            });
            this.$store.commit('designer/setLayoutItems', layoutItems);
            this.$Message.success('升级完成，请记得保存页面');
            this.$EventBus.$emit('pn_update_comps_success');
          }
        });
      },
    },
    computed: {},
    watch: {
      show (val) {
        if (val) {
          this.renewableComps = this.$DesignerCommonUtil.loadRenewableComps(this.layoutItems)
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .update-comp-modal {
    width: 300px;
    max-height: 650px;
    padding: 8px;
    position: relative;
    .header {
      padding-bottom: 5px;
      border-bottom: 1px solid #e0e0e0;
      background-color: #1C1C1E;
      position: sticky;
      top: 0px;
    }
    .body {
      padding-top: 5px;
      .renewable-comp-item {
        width: 100%;
        height: 38px;
        padding-left: 10px;
        background-color: #616161;
        border: 1px solid #424242;
        line-height: 35px;
        color: #fff;
        margin-bottom: 5px;
      }
    }
    .footer {
      background-color: #2196f3;
      padding: 5px 10px 5px 10px;
      position: sticky;
      bottom: 0px;
      border-radius: 4px;
    }
  }
</style>
